<template>
    <div class="login">
      <div>
        <img src="../assets//img/logo.png">
        <p>山羊听书</p>
      </div>
      
      <van-form @submit="onSubmit">
      <van-field v-model="username" name="uname" label="用户名" placeholder="请输入"  />

      <van-field v-model="password" type="password" name="upass" label="密码" placeholder="请输入" />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>

      <div class="tishi">
        <router-link class="link" to="/register"><span>还没账号？点击注册</span></router-link>
      </div>

      <div class="message">
        <van-checkbox v-model="checked" icon-size="12px" checked-color="#FA6205"></van-checkbox>
        阅读并同意山羊听书的
        <a href="#">《服务协议》</a>
        <a href="#">《个人信息保护政策》</a>
        未注册手机号登录将会自动注册
      </div>
    </van-form>
    <back-to></back-to>
    </div>
  </template>
  <script>
  // 导入组件
  import BackTo from '@/components/BackTo.vue'
  import { Toast, Dialog } from 'vant'
  // 初始化（获取存储在本地的所有用户信息）
  let sky_users = []
  let sky_users_str = localStorage.getItem("SKY_USERS")
  if (sky_users_str) {
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
  }
  
  
  export default {
    data() {
      return {
        username: '',
        password: '',
        checked: false,
      };
    },
    components: {
    BackTo
  },
    methods: {
      onSubmit(values) {
        // console.log('submit', values);
        // 判断用户是否阅读平台协议
        if (!this.checked) {
          Toast('请阅读协议和政策');
          return false;
        }
  
        // 解构赋值
        let { uname, upass } = values
        // 判断输入框是否为空
        if (uname == "" || upass == "") {
          // 弹窗提示
          // Toast.fail('输入框不能为空');
          Toast('输入框不能为空~')
          return false;
        }
  
        // 匹配账号和密码
        let arr = sky_users.filter(item => {
          return item.username == uname && item.password == upass
        })
  
        // console.log(arr);
        // 根据arr数组长度判断用户是否登录成功
        if (arr.length == 1) {
          // 把用户ID作为token
          let id = arr[0].id;
          localStorage.setItem("AUTO_TOKEN",id);
  
          // 给用户反馈“注册结果”
          Dialog.alert({
            message: '登录成功。',
          }).then(() => {
            // on close
            // 跳转登录页
            this.$router.push({ path: '/my' })
          });
        }
        else {
          let arr2 = sky_users.filter(item => item.username == uname)
          if (arr2.length == 0) {
            Toast('该账号不存在')
          }
          else {
            Toast('账号或者密码错误')
          }
        }
      },
    },
  
  
  };
  </script>
  <style lang="less">
  @import '../assets/css/varible.less';
  
  .login {
    padding-top: 70px;
    div{
      text-align: center;
      img{
        width: 100px;
        height: 100px;
        padding-bottom: 10px;
      }
      p{
        padding-bottom: 15px;
        color:#FA6205;
        font-weight: bold;
        font-family: a;
        font-size: 30px;
      }
    }
      
    
    .van-button--normal {
      background-color: @bgColor;
      border: 0;
    }
  
    .link {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 16px;
      // text-decoration: underline;
  
    }
  
    .message {
      padding: 0 15px;
      box-sizing: border-box;
      margin-top: 20px;
      font-size: 13px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      text-align: center;
      color: #666;
      line-height: 175%;
  
      a {
        color: #FA6205;
      }
  
      .van-checkbox {
        display: inline-block !important;
        
      }
    }
  
  }
  .tishi{
  a{
    span{
      font-size: 18px;
      font-family: a;
      font-weight: bold;
      text-decoration: underline;
      color: #FA6205;
    }
  }
}
  </style>